<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />        
        <link rel="stylesheet" type="text/css" href="js/jquery-mobile/jquery.mobile-1.2.0-rc.2.min.css" />
        <link rel="stylesheet" type="text/css" href="js/jquery/jquery.validate.css" />
        <link rel="stylesheet" type="text/css" href="css/openbiz-mobile.css" />
        <script type="text/javascript" src="js/openbiz/openbiz-mo.js"></script>
        <script type="text/javascript" src="cordova-2.1.0.js"></script>
        <script type="text/javascript" src="js/jquery/jquery-1.8.2.min.js"></script>
        <script type="text/javascript" src="js/jquery/jquery.validate.min.js"></script>
        <script type="text/javascript" src="js/jquery-mobile/jquery.mobile-1.2.0-rc.2.min.js"></script>
<!--         <script src="http://debug.phonegap.com/target/target-script-min.js#OpenbizMobile"></script> -->
        <script type="text/javascript">
        $( document ).bind( "mobileinit", function() {
            $.mobile.allowCrossDomainPages = true;
        });
        $(document).ready(function(){
        	OpenbizMo.init();        
        	$('#account-setting').live("pagebeforeshow",function(event,ui)
	        {
	        		$('#account-setting #username').val(	window.localStorage.getItem('username')	);
	        		$('#account-setting #password').val(	window.localStorage.getItem('password')	);
	        		$('#account-setting #server_uri').val(window.localStorage.getItem('server_uri'));
	        			        		
	        });        	
        	$('#account-setting-form').validate({
    			rules:{
    				server_uri:{
    					required:true,
    					url:true
    				}
    			}
    		});
        })
        </script>
    </head>
    <body>
        
           
        	<!-- Lost Connection -->
        	<div id="main"  data-role="page">

			    <div data-role="content" class="content">
			    
			        <img src="img/server-logo.png" class="server-logo" />
			        
			        <a data-theme="b" data-role="button"  data-inline="true" style="width:80%;height:1.5cm;line-height:1cm" onclick="javascript:OpenbizMo.Login()" data-icon=""
			        data-iconpos="">
			            Login
			        </a>
			        
			        <p id="remote-system-name">Remote System</p>
			    </div>
			    <div data-theme="f" data-role="footer" data-position="fixed" >
			        <div class="ui-grid-a" >
			            <div class="ui-block-a right-line" style="width:60%; height:60px;" >
			            	<a class="btn-about-app" style="color:#666666;" data-transition="slideup" data-inline="true" href="#about-app">
			            	Openbiz Mobile
			            	<span class="version">Version 1.1</span>
			            	</a>
			            </div>
			            <div class="ui-block-b"  style="width:40%; height:60px;">
			            	<a class="btn-account-setting" style="color:#666666;" data-transition="slideup" data-inline="true" href="#account-setting">Account Setting</a>
			            </div>
			        </div>
			    </div>
				
			</div>


			<!-- Lost Connection -->
			<div id="lost-connection" data-role="page" >
				
				<div class="content" data-role="content">	
					<h2>No Internet</h2>
					<p>Please connect your mobile to internet then click retry button.</p>
								
					<a data-theme="b" data-role="button"  data-inline="true" href="javascript:OpenbizMo.checkDeviceOnline()" data-icon="refresh">
				            Retry
				    </a>
			    </div>
			</div>
			
			<!-- About Openbiz mobile -->
			<div id="about-app" data-role="page" >
				<div data-theme="b" data-role="header" >
			        <h3>
			           About Openbiz 
			        </h3>
			        <a data-role="button" data-direction="reverse" data-transition="slide" data-rel="back"
				        data-icon="home" data-iconpos="left" class="ui-btn-left">
				            Home
				    </a>
			    </div>
				<div class="content" data-role="content">	
					<h2>Openbiz Mobile</h2>
					<p>Openbiz Mobile App is a mobile client for Openbiz Based web system. This app is designed for deliver better Openbiz Products user experence on mobile based device ,It could help users implement quick login.</p>
					<p>Openbiz Mobile is OpenSource Project. You can download and review our source code at http://code.google.com/p/openbiz-mobile</p>
				
			    </div>
			</div>
			
			<!-- Account Setup Page -->
			<div id="account-setting" data-role="page">
			    <div data-theme="b" data-role="header" >
			        <h3>
			           Account Setting
			        </h3>
			        <a data-role="button" data-direction="reverse" data-transition="slide" data-rel="back"
				        data-icon="home" data-iconpos="left" class="ui-btn-left">
				            Home
				    </a>
			    </div>
			    <form id="account-setting-form"  action="" data-ajax="false" onSubmit="return OpenbizMo.saveAndLogin()">
			    <div data-role="content">
			        <div data-role="fieldcontain">
			            <fieldset data-role="controlgroup">
			                <label for="server_uri">
			                    Server URL
			                </label>
			                <input name="server_uri" id="server_uri" placeholder="http://i.openbiz.cn"
			                 type="url" required="required">
			            </fieldset>
			 		</div>
			        <div data-role="fieldcontain">            
			        	<fieldset data-role="controlgroup">
			                <label for="username">
			                    Username
			                </label>
			                <input name="username" required="required" id="username" placeholder="admin" value="" type="text">
			       		
			                <label for="password" >
			                    Password
			                </label>
			                <input name="password" required="required" id="password" placeholder="Password" value=""
			                type="password">
			            </fieldset>
			        </div>
			        <input data-theme="b" data-icon="arrow-r" data-iconpos="right" value="Login"
			        type="submit">
			        
			    </div>
			    </form>
			</div>
        </body>
</html>
